Changing the ASP.NET AJAX Control Toolkit Calendar display mode

29Oct07

The ASP.NET AJAX Control Toolkit’s Calendar (Click Here To See The CalendarExtender Control In Action) is a very nice control that allows you implement a client side dynamic calendar for date-picking functionality. One interesting feature is the ability to change the calendar from the default “days” mode (shows the days in one month) to “months” mode (showing all of the months in the current year) by clicking on the calendar title. Another click on the title will change the calendar into “years” mode, which shows 12 years at a time.

One feature that would be nice is the ability to start the calendar control in any of the desired modes (“days”, “months”, or “years”) depending on the type of interaction with the calendar that is most appropriate. For example, a current project of mine requires entering employee hire dates — which are almost always at least a few years old.

The following is some simple code that allows you to get the desired functionality (in this case, we switch to the “years” mode) by handling the Calendar’s OnClientShown event.

Step 0 — The initial Calendar control hooked up to a TextBox

<asp:TextBox ID="txtTitleLength" runat="server"></asp:TextBox> 

<AjaxControlToolkit:CalendarExtender ID="calTitleLength" runat="server"

TargetControlID="txtTitleLength"> 

</AjaxControlToolkit:CalendarExtender>

Step 1 — Add a callback to the OnClientShown event (here: “calendarShown”)

<asp:TextBox ID="txtTitleLength" runat="server"></asp:TextBox> 

<AjaxControlToolkit:CalendarExtender ID="calTitleLength" runat="server"

TargetControlID="txtTitleLength"

OnClientShown="calendarShown"> 

</AjaxControlToolkit:CalendarExtender>

Step 2 — Handle the OnClientShown event (which takes 2 parameters: “sender, e”) and then call the calendar control’s _switchMode() method

function calendarShown(sender, e) { sender._switchMode("years"); }

That’s all there is to it! One note: you must call the switchMode() method in the OnClientShown event and not the OnClientShowing event for the effect to work properly.

Filed under: Code, Tips   |  14 Comments